<template>
  <div class="columnWrap">
    <div class="pagebg">
      <img class="pagebg" :src="categorydata.bgImgUrl" />
    </div>
    <div class="ExclusiveColumnList">
      <!-- <div class="titleBox">
        <div class="title">- {{categorydata.title}} -</div>
        <div class="detail" :class="descmorebool?'detail_on':''" v-if="categorydata.desc">
          {{categorydata.desc || '好先生与皓先生'}}
          <div class="more" @click="descmore">更多》</div>
        </div>
      </div> -->
      <!-- 音乐列表 -->
      <div class="lists">
        <div class="top">
          <div class="control">
            <div class="comments" @click="comments"></div>
            <div class="share" @click="share"></div>
            <div class="collect" @click="collect" v-show="!iscollect"></div>
            <div class="collect on" @click="delcollect" v-show="iscollect"></div>
            <div class="download" @click="download"></div>
          </div>
          <div class="more" @click="goPlay(audioListdata[0].id,0)" v-if="audioListdata.length>0">
            <img src="https://youyang-cdn.mdshuzhi.com/upload/icon_playall.png" />播放全部
          </div>
        </div>
        <div class="con" v-if="audioListdata.length>0">
          <scroller ref="myscroller" class="scroll" :on-infinite="infinite">
            <div v-for="(item,index) in audioListdata" :key="index" class="item">
              <div @click="goPlay(item.id,index)">
                <div class="key">{{index+1}}</div>
                <div class="pic">
                  <img :src="item.imgUrl" />
                </div>
                <div class="right">
                  <div class="name">
                    <span class="n">{{item.title || '好先生和皓先生'}}</span>
                    <!-- 显示看的icon -->
                    <template v-if="item.hasVideo==1">
                      <a v-if="item.hasVideo==1" class="lookText" :href="item.videoLink">看</a>
                    </template>
                  </div>
                  <div class="nums">{{item.duration || '0:00'}} | {{item.playCount || 0}}人播放</div>
                </div>
                <div>
                    <img
                      class="play"
                      src="../../../static/images/icon_play4@2x.png"
                    />
                  </div>
              </div>
            </div>
          </scroller>
        </div>
        <div class="empty" v-else>精彩内容加载中</div>
      </div>
    </div>
    <transition name="fade">
      <div class="listShadow" v-show="isShowPicker">
        <div class="shadow" @click="isShowPicker && cancleBtn()"></div>
        <div class="showList" v-if="downList.length>0">
          <!-- 线条 -->
          <div class="topLineBox">
            <span class="line"></span>
          </div>
          <!-- 弹出窗内容区 -->
          <div class="contentBox">
            <!-- <div class="ListeningRecordLeft multipleCheckBox" @click="multipleSelectBtn">
                <div class="selectBox">
                    <img src="https://youyang-cdn.mdshuzhi.com/upload/icon_gouxuan@2x.png" v-show="isMultipled" />
                </div>
                <span>{{isMultipled?'全不选':'全选'}}</span>
            </div> -->
            <!-- <div class="ListeningRecordRight">
              <div class="rightImg marginLine">
                <span v-show="isSelected > 0">已选中{{isSelected}}首</span>
                <img src="../../../static/images/icon_download@2x.png" @click="downMoreLoadBtn"/>
              </div>
            </div> -->
            <!-- 歌曲列表 -->
            <scroller :on-infinite="infinite" ref="myscrollerDownload" class="musicList">
                <li class="musicItem" v-for="(item,index) in downList" :key="index">
                    <!-- <div class="selectBox" @click="singleSelectBtn(item.id)">
                        <img src="../../../static/images/icon_gouxuan@2x.png" v-show="item.downSelect" />
                    </div> -->
                    <div class="musicItemBox">
                        <div class="musicItemLeft">
                            <div class="musicImg">
                                <img :src="item.imgUrl" />
                            </div>
                            <div class="musicTitle">
                                <div class="musicText">{{item.title}}</div>
                                <!-- <a :href="item.videoPath" class="lookText" v-if="item.hasVideo==1">看</a> v-if="isNoMyDownloads && listenFlag" -->
                            </div>
                        </div>
                        <div class="musicItemRight">
                            <!-- <div class="rightImg marginLine" @click="downLoadBtn(item.id,item.audioUrl,item.title)">
                                <img src="../../../static/images/icon_download@2x.png" />
                            </div> -->
                            <a class="rightImg marginLine" :href="item.audioUrl" :download="item.title" target="_blank" data-id="item.id" >
                              <img src="../../../static/images/icon_download@2x.png" />
                            </a>
                        </div>
                    </div>
                </li>
            </scroller>
          </div>
          <!-- 收起 -->
          <div @click="cancleBtn" class="cancleBtn">收起</div>
        </div>
      </div>
    </transition>
    <Footer :current="'1'"></Footer>
  </div>
</template>

<script>
import FileSaver from 'file-saver';
import Footer from "@/components/layer/footer";
import controller from "@/components/controllers/controllers";
import { Toast, MessageBox } from "mint-ui";
const SEQUENCE_MODE = 1;
const RANDOM_MOD = 2;
const SINGLE_CYCLE_MOD = 3;
export default {
  name: "ExclusiveColumnList",
  components: {
    Footer,
  },
  data() {
    return {
      categoryId: "",
      categorydata: "",
      sortBy: 3,
      audioListdata: [],
      page: 1,
      pageSize: 10,
      isEnd: false,
      iscollect: true,
      Collectid: 0,
      playurl: "",
      currentSong: null,
      playMod: SEQUENCE_MODE,
      descmorebool: "",
      isShowPicker: false, //是否显示弹出框
      isMultipled: false, //是否已全选
      multipleList: [], //存储选中的id
      selectAudioList: [], //存储选中的音频
      selectAudioTitle: [], //存储选中的音频名称
      downList: [], //可以下载的歌曲
      isSelected: 0, //已选中个数
    };
  },
  created() {
    window.addEventListener('mousewheel',this.handleScroll);
    this.categoryId = this.$route.query.id;
    this.getCategoryDetail();
    this.getAudioList();
  },
  destroyed(){
    window.removeEventListener('mousewheel',this.handleScroll)
  },
  methods: {
    handleScroll(e){
      let that = this  //此this指向的是vue
      console.log(e.wheelDelta)
      if (e.wheelDelta < 0) {
        if(this.isShowPicker){
          that.$refs.myscrollerDownload && (that.$refs.myscrollerDownload.scrollBy(0, 50, true));
        }else{
          that.$refs.myscroller && (that.$refs.myscroller.scrollBy(0, 50, true));
        }
      } else {
        if(this.isShowPicker){
          that.$refs.myscrollerDownload && (that.$refs.myscrollerDownload.scrollBy(0, 50, true));
        }else{
          that.$refs.myscroller && (that.$refs.myscroller.scrollBy(0, -50, true));
        }
      }
    },
    goPlay(id, index) {
      this.$store.commit("setCurrentIndex", index);
      this.$store.commit("setSonglist", this.audioListdata);
      this.$router.push({
        path: "/Playing",
        query: {
          audioId: id,
          categoryId: this.categoryId,
        },
      });
    },
    // 评论
    comments() {
      if (!localStorage.getItem("token")) {
        this.$toLogin()
      } else {
        this.$router.push("/Comment?rid=" + this.categorydata.id + "&type=1");
      }
    },
    // 分享
    share() {
      this.$Share(this.categorydata.id, 1, this.categorydata.title, this.categorydata.imgUrl,this.$route.fullPath);
    },
    checkCollect() {
      let _self = this;
      controller
        .checkCollect({
          rid: this.categorydata.id,
          type: 1,
        })
        .then((res) => {
          if (res && res.data && res.data.baseData ) {
            _self.iscollect = true;
            _self.Collectid = res.data.baseData;
          } else {
            _self.iscollect = false;
          }
        });
    },
    // 收藏
    collect() {
      if (!localStorage.getItem("token")) {
        this.$toLogin()
      } else {
        console.log("收藏");
        this.iscollect = true;
        let data = {
          rid: this.categorydata.id || "",
          type: 1,
          bodyId: 2,
        };
        controller.collect(data).then((res) => {
          console.log("res", res);
          Toast("收藏成功");
          this.checkCollect();
          this.$updateScore(9)
        });
      }

    },
    // 取消收藏
    delcollect() {
      if (!localStorage.getItem("token")) {
        this.$toLogin()
      } else {
        console.log("取消收藏");
        let _self = this;
        this.showMessageBox("是否取消收藏", () => {
          controller
            .delCollect({
              ids: this.Collectid,
            })
            .then((res) => {
              _self.checkCollect();
            });
        });
      }
    },
    // 下载
    download() {
      if(this.audioListdata.length == 0){
        return
      }
      this.isShowPicker = true
      this.downList = this.audioListdata
    },
    //判断是否是微信浏览器的函数
    isWeiXin() {
      //window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
      var ua = window.navigator.userAgent.toLowerCase();
      //通过正则表达式匹配ua中是否含有MicroMessenger字符串
      if (ua.match(/MicroMessenger/i) == 'micromessenger') {
        return true;
      } else {
        return false;
      }
    },
    // 下载按钮
    downLoadBtn(rid,audioUrl,title) {
      if (this.isWeiXin()) {
        MessageBox.alert('请点击右上角在浏览器打开下载').then(action => {});
        return
      }
      if (!localStorage.getItem('token')) {
        this.$router.push("/login")
        return
      }
      controller
        .download({
            rid,
        })
        .then(() => {
          // const aDom = document.createElement('a')//创建标签
          // const evt = document.createEvent('HTMLEvents')//创建事件
          // evt.initEvent('click', false, false)//初始化事件，绑定点击事件，不冒泡，不阻止浏览器默认行为
          // aDom.download = title
          // aDom.href = encodeURI(audioUrl);//对地址进行编码
          // aDom.dispatchEvent(evt)//触发事件
          // aDom.click()
          // Toast({
          //     message: "下载成功",
          //     duration: 1000,
          // });
          // aDom.remove()

          const url = encodeURI(audioUrl)
          const link = document.createElement('a');
          link.href = url;
          link.setAttribute('download', title);
          link.setAttribute('target', "_blank");
          document.body.appendChild(link);
          link.click();
          link.remove();
        })
        .catch((err) => {
          Toast({
              message: err.msg,
              duration: 1000,
          });
        })
    },
    //多选下载按钮
    async downMoreLoadBtn(){
      if(this.selectAudioList.length == 0){
        Toast({
            message: "请选择需要下载的内容",
            duration: 1000,
        });
        return
      }
      const that = this
      const urlsArray = that.selectAudioList
      for (let i = 0; i < urlsArray.length; i++){
        await that.downLoadBtn(that.multipleList[i],urlsArray[i],that.selectAudioTitle[i])
      }
    },
    cancleBtn(){
      this.isShowPicker = false;
    },
    //单个按钮
    singleSelectBtn(selectId) {
      let id = selectId;
      let isMultipled = this.isMultipled; //是否全选
      let isSelected = this.isSelected; //已选多少个
      let multipleList = this.multipleList; //存储选中的id
      let selectAudioList = this.selectAudioList //储存选中的音频
      let selectAudioTitle = this.selectAudioTitle //储存选中的音频名称
      let list = this.downList;
      const index = list.findIndex(item => item.id === selectId);
      list[index].downSelect = !list[index].downSelect
      this.$set(list,index,list[index])
      // 判断是否已经选中
      if (multipleList.includes(id)) {
          // 选中的，就直接删除掉
          let idx = multipleList.indexOf(id);
          multipleList.splice(idx, 1);
          selectAudioList.splice(idx,1)
          selectAudioTitle.splice(idx,1)
          isSelected--;
          isMultipled = false;
      } else {
          multipleList.push(id);
          selectAudioList.push(list[index].audioUrl);
          selectAudioTitle.push(list[index].title);
          selectAudioTitle.push(list[index].title)
          // 判断是否全选
          if (multipleList.length == list.length) {
              isMultipled = true;
          }
          isSelected++;
      }
      // list.map((item,index) => {
      //     if (multipleList.includes(item.id)) {
      //         item.downSelect = true;
      //         console.log(index,item.downSelect)
      //     } else {
      //         item.downSelect = false;
      //     }
      // });
      // console.log("单个选择按钮id", list,multipleList);
      // this.isShowSingleSelect = true;
      this.multipleList = multipleList;
      this.selectAudioList = selectAudioList;
      this.selectAudioTitle = selectAudioTitle;
      this.isSelected = isSelected;
      this.isMultipled = isMultipled;
      this.downList = list;
    },
    // 全选按钮
    multipleSelectBtn() {
        console.log("全选按钮");
        let multipleList = this.multipleList; //存储选中的id
        let isMultipled = this.isMultipled; //是否全选
        let isSelected = this.isSelected; //已选多少个
        let selectAudioList = this.selectAudioList //储存选中的音频
        let selectAudioTitle = this.selectAudioTitle //储存选中的音频名称
        let list = this.downList;
        if (multipleList.length != 0) {
            if (multipleList.length == list.length) {
                multipleList.length = 0;
                selectAudioList.length = 0;
                selectAudioTitle.length = 0
                isMultipled = false;
                isSelected = 0;
                list.map((item) => {
                    item.downSelect = false;
                });
            } else {
                list.map((item) => {
                    if (!item.downSelect) {
                        item.downSelect = true;
                        multipleList.push(item.id);
                        selectAudioList.push(item.audioUrl);
                        selectAudioTitle.push(item.title);
                    }
                });
                isMultipled = true;
                isSelected = list.length;
            }
        } else {
            // 还没有选择任何一条数据
            list.map((item) => {
                item.downSelect = true;
                multipleList.push(item.id);
                selectAudioList.push(item.audioUrl);
                selectAudioTitle.push(item.title);
            });
            isMultipled = true;
            isSelected = list.length;
        }
        this.multipleList = multipleList;
        this.selectAudioList = selectAudioList;
        this.selectAudioTitle = selectAudioTitle;
        this.isMultipled = isMultipled;
        this.isSelected = isSelected;
        this.downList = list;
    },
    // 上拉加载
    infinite(done) {
      console.log(this.isEnd)
      setTimeout(() => {
        if (this.isEnd) {
          if(this.isShowPicker){
            this.$refs.myscrollerDownload.finishInfinite(true); //这个方法是不让它加载了，显示“没有更多数据”，要不然会一直转圈圈
          }else{
            this.$refs.myscroller.finishInfinite(true); //这个方法是不让它加载了，显示“没有更多数据”，要不然会一直转圈圈
          }
        } else {
          console.log("进行下一次加载操作");
          this.page += 1;
          this.getAudioList();
          done(); //进行下一次加载操作
        }
      }, 1500);
    },
    //下拉刷新
    refresh() {
      this.page = 1;
    },
    //获取头部信息
    getCategoryDetail() {
      let _self = this;
      controller
        .categoryDetail({
          categoryId: this.categoryId,
        })
        .then((res) => {
          console.log("头部", res);
          _self.categorydata = res.baseData;
          _self.checkCollect();
        });
    },
    //获取音频列表
    getAudioList() {
      let _self = this;
      controller
        .audioList({
          categoryId: this.categoryId,
          sortBy: this.sortBy,
          page: this.page,
          pageSize: 100,
        })
        .then((res) => {
          // _self.$refs.myscroller.finishPullToRefresh();
          console.log("音乐列表", res);
          if (res.baseData.list.length > 0) {
            res.baseData.list.forEach(item=>{
              item.downSelect = false
            })
            _self.audioListdata = _self.audioListdata.concat(res.baseData.list);
            _self.downList = _self.downList.concat(res.baseData.list);
            _self.isEnd = res.baseData.lastPage;
          }
        });
    },
    //show模态框
    showMessageBox(message, done) {
      MessageBox.confirm("", {
        title: "提示",
        message: message,
        confirmButtonText: "确认",
        cancelButtonText: "取消",
      })
        .then((action) => {
          if (action == "confirm") {
            console.log("done", typeof done);
            done();
          }
        })
        .catch((error) => {
          if (error == "cancel") {
            console.log("点击取消");
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
/* 歌曲列表 */
.musicList {
  width: 100%;
  min-width: 640px;
  max-width: 960px;
  // margin: 110px auto 0;
  // height: calc(100vh - 87px);
  // height: auto !important;
  /deep/ &._v-container{
    top: 57px;
    left: 50%;
    transform: translateX(-50%);
    ._v-content{
      padding-bottom: 200px;
    }
  }

  .musicItem {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 32px;
      padding: 0 15px;
      box-sizing: border-box;
  }

  .musicItemBox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .musicItemLeft {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex: 1;

      .musicImg {
        width: 80px;
        height: 80px;
        border-radius: 4px;
        overflow: hidden;
        margin-right: 24px;
      }

      .musicTitle {
        flex: 1;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .musicText {
          font-size: 32px;
          color: #323232;
          margin-right: 10px;
          width: 400px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        // 看
        .lookText {
          color: #f5b7a9;
          font-size: 24px;
          border-radius: 4px;
          width: 48px;
          height: 32px;
          display: flex;
          justify-content: center;
          align-items: center;
          border: 1px solid #f5b7a9;
        }
      }
    }
    /* 右边 */
    .musicItemRight {
      height: 100%;
      display: flex;
      align-items: center;
      margin-right: 20px;
      font-size: 24px;
      color: #a8acbb;
      .rightImg,
      .rightImg  {
          width: 36px;
          height: 36px;
      }
    }
  }
  img {
      width: 100%;
      height: 100%;
  }
}
/* 选择框 */
.selectBox {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #a8acbb;
    margin-right: 24px;
    position: relative;
    overflow: hidden;

    img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
}
/* 列表弹出窗 */
.listShadow {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 100%;
  z-index: 1000;
  min-width: 640px;
  max-width: 960px;
  .shadow{
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.32);
    z-index: 99998;
  }
  .showList {
    min-width: 640px;
    max-width: 960px;
    width: 750px;
    height: 80%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 32px 32px 0 0;
    background-color: #fff;
    z-index: 999;
    padding: 0 15px;
    box-sizing: border-box;

    //   横线
    .topLineBox {
      width: 100%;
      height: 57px;
      display: flex;
      justify-content: center;
      align-items: center;

      .line {
        display: inline-block;
        width: 120px;
        height: 6px;
        background-color: #ededed;
        border-radius: 3px;
      }
    }

    /* 弹出窗内容区 */
    .contentBox {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .ListeningRecordLeft,
        .listenText {
          font-size: 24px;
          color: #a8acbb;
        }

        .ListeningRecordRight {
          display: flex;
          margin-right: 20px;
          .rightImg  {
             display: flex;
             align-items: center;
              img {
                width: 36px;
                height: 36px;
                margin-left: 10px;
              }
          }
        }
        /* 全选按钮 */
        .multipleCheckBox {
          // width: 250px;
          display: flex;
        }

        .multipleCheckBox img {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          border: 2px solid #a8acbb;
          margin-right: 24px;
          position: relative;
          top: -3px;
          left: -2px;
        }
      }
    }
    /* 收起按钮 */
    .cancleBtn {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 116px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 32px;
      color: #323232;
      text-align: center;
      border-top: 2px solid rgb(231, 231, 231);
      box-sizing: border-box;
      background-color: #fff;
    }
  }
// 弹出窗效果
@keyframes bounce-in {
  0% {
    transform: translateY(100%);
  }

  100% {
    transform: translateY(0%);
  }
}

.fade-enter-active {
  transform-origin: left center;
  animation: bounce-in 0.5s;
}

.fade-leave-active {
  transform-origin: left center;
  animation: bounce-in 0.5s reverse;
}

.columnWrap{
  width: 100%;
  position: relative;
}
.pagebg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: #000;
  z-index: -1;

  img {
    width: 100%;
    opacity: 0.9;
    background-color: #000;
    min-height: 400px;
    position: relative;
    z-index: -2;
  }
}

.ExclusiveColumnList {
  // width: 750px;
  width: 100%;
  min-width: 640px;
  max-width: 960px;
  margin: 0 auto;
  position: fixed;

  .titleBox {
    width: 100%;
    height: 408px;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;

    .title {
      font-size: 60px;
      color: #fff;
      font-weight: bold;
      margin-bottom: 20px;
    }

    .detail {
      text-align: center;
      width: 100%;
      box-sizing: border-box;
      padding: 0 90px 0 25px;
      display: template;
      font-size: 26px;
      margin-bottom: 45px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      color: rgba(255, 255, 255, 0.7);
      position: relative;

      .more {
        font-size: 20px;
        position: absolute;
        color: #e66d4d;
        z-index: 1;
        right: 25px;
        bottom: 0;
        transform: translateY(-10%);
      }
    }

    .detail_on {
      white-space: normal;
    }
  }

  /* 音乐列表 */
  .lists {
    overflow: hidden;
    border-radius: 20px;
    position: relative;
    z-index: 10;
    top: 390px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    border-radius: 20px 20px 0px 0px;

    .top {
      overflow: hidden;
      height: 96px;
      line-height: 96px;
      text-align: center;
      color: #fff;
      font-size: 32px;
      position: relative;

      .control {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        float: right;
        width: 280px;
        line-height: 96px;
        height: 96px;
        margin-right: 24px;

        .comments {
          width: 36px;
          height: 36px;
          background: url(https://youyang-cdn.mdshuzhi.com/upload/icon_comments.png)
            no-repeat center center;
          background-size: 100%;
          display: inline-template;
        }

        .share {
          width: 36px;
          height: 36px;
          background: url(https://youyang-cdn.mdshuzhi.com/upload/icon_share.png)
            no-repeat center center;
          background-size: 100%;
          display: inline-template;
        }

        .collect {
          width: 36px;
          height: 36px;
          background: url(https://youyang-cdn.mdshuzhi.com/upload/icon_collect.png)
            no-repeat center center;
          background-size: 100%;
          display: inline-template;
        }

        .on {
          background: url(https://youyang-cdn.mdshuzhi.com/upload/icon_like_new@2x.png)
            no-repeat center center;
          background-size: 100%;
          display: inline-template;
        }

        .download {
          width: 36px;
          height: 36px;
          background: url(https://youyang-cdn.mdshuzhi.com/upload/icon_download.png)
            no-repeat center center;
          background-size: 100%;
          display: inline-template;
        }
      }

      .more {
        float: left;
        font-size: 32px;
        margin-left: 24px;
        color: #323232;

        img {
          width: 32px;
          height: 32px;
          vertical-align: middle;
          position: relative;
          top: -1px;
          margin-right: 10px;
        }
      }
    }

    .empty {
      height: calc(100vh - 620px);
      width: 100%;
      text-align: center;
    }

    .con {
      height: calc(100vh - 620px);
      position: relative;
      .scroll{
        /deep/ &._v-container{
          // height: auto !important;
          ._v-content{
            padding-bottom: 40px;
          }
        }
      }
      .item {
        padding: 0 24px;
        margin-bottom: 32px;
        overflow: hidden;
        position: relative;

        .key {
          width: 40px;
          line-height: 80px;
          margin-right: 20px;
          float: left;
        }

        .pic {
          width: 80px;
          height: 80px;
          border-radius: 8px;
          margin-right: 24px;
          float: left;
          background-color: #eee;
          position: relative;

          img {
            border-radius: 8px;
            width: 100%;
            height: 100%;
            position: relative;
            z-index: 2;
            background-color: #eee;
          }
        }

        .right {
          overflow: hidden;

          .name {
            color: #323232;
            font-size: 32px;
            margin-bottom: 15px;
            padding-right: 80px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            display: flex;
            align-items: center;
            .n {
              display: inline-block;
              max-width: 75%;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
          }
        }
      }

      .nums {
        color: #a8acbb;
        font-size: 20px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .play {
        width: 60px;
        height: 60px;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 12px;
        margin: auto;
        z-index: 1;
      }
    }
  }
}

.lookText {
  color: #f5b7a9;
  font-size: 24px;
  border-radius: 4px;
  width: 48px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #f5b7a9;
  margin-left: 10px;
}
</style>
